<script setup>
import { computed } from 'vue';
import { ElDialog } from 'element-plus';

const props = defineProps({
  visible: Boolean,
  title: String
});

const emits = defineEmits([ 'update:visible', 'close' ]);

const dialogVisible = computed({
  get() {
    return props.visible;
  },
  set(visible) {
    emits('update:visible', visible);
    if (!visible) {
      emits('close');
    }
  },
});
</script>

<template>
  <ElDialog v-model="dialogVisible" :title="title" width="30%">
   <slot></slot>
    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="dialogVisible = false"> Confirm </el-button>
      </span>
    </template>
  </ElDialog>
</template>
